<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <ul>
        <router-link :to="item.path" tag="li" v-for="(item,index) in navList" :key="index" :class="$route.meta.nowIndex ===index ? 'active':''">
            {{item.meta.title}}
        </router-link>
    </ul>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: '',
  data() {
    return {
      msg: '测试',
      navList:[]
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      let res = this.$router.options.routes.filter(item=>{
          return !item.meta.hidden && item.meta.footerNav
      })
      this.navList = res[0].children.filter(item=>{
          return item.meta.footer
      })
  },
  // Vue方法定义
  methods: {
      
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
ul{
    position: fixed;
    bottom:0;
    width:100vw;
    height:60px;
    list-style: none;
    display: flex;
    justify-content: space-around;
    line-height: 60px;
    box-shadow:0px -1px 0px #ccc;
}
.active{
    color:red;
}
</style>